<template>
  <div class="app-container">
    <el-row class="row">
      <el-select clearable class="filter-item" style="width: 130px" v-model="listQuery.accountid" filterable @change="getOptions" placeholder="选择用户">
        <el-option v-for="item in  userOptions" :key="item.key" :label="item.text" :value="item.key">
        </el-option>
      </el-select>
      <el-select clearable class="filter-item" style="width: 130px" v-model="listQuery.channelid" filterable @change="getOptions" placeholder="选择渠道">
        <el-option v-for="item in  channelOptions" :key="item.key" :label="item.text" :value="item.key">
        </el-option>
      </el-select>
      <el-select clearable class="filter-item" style="width: 130px" v-model="listQuery.brandid" filterable @change="getOptions" placeholder="选择品牌路由器">
        <el-option v-for="item in  brandOptions" :key="item.key" :label="item.text" :value="item.key">
        </el-option>
      </el-select>
      <el-button class="filter-item" type="primary" @click="handleFilter">确认</el-button>
      <el-button class="filter-item el-f-r" type="primary" v-if="pid==1" @click="handleUpload">导入数据</el-button>
    </el-row>
    <el-row class="row">
      <div class="page-header">
        <h4>今日推荐</h4>
      </div>
      <el-table :data="todayData"  element-loading-text="Loading" border fit highlight-current-row>
        <el-table-column align="center" label='用户' >
          <template slot-scope="scope">
            {{scope.row.accountInfo}}
          </template>
        </el-table-column>
        <el-table-column align="center" label="渠道">
          <template slot-scope="scope">
            {{scope.row.channelInfo}}
          </template>
        </el-table-column>
        <el-table-column align="center" label="路由器品牌" >
          <template slot-scope="scope">
            <span>{{scope.row.brandInfo}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="created_at" label="激活量">
          <template slot-scope="scope">
            <span>{{scope.row.activitcount}}</span>
          </template>
        </el-table-column>
      </el-table>
      <div class="chart-filter">
        <el-select clearable class="filter-item" name="lineChartTime" style="width: 130px" v-model="dafaultchartDate" @change="handleLineTimeChange" placeholder="时间">
          <el-option v-for="item in  linetimeOptions" :key="item.key" :label="item.display_name" :value="item.key">
          </el-option>
        </el-select>
        <el-date-picker
          v-model="chart_pick_date"
          :editable="false"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions0"
          @change="handleChartDatePickChange">
        </el-date-picker>
        <el-button class="filter-item" type="primary" @click="handleQueryChart">查询</el-button>
      </div>
      <line-chart :chart-data="lineChartData"></line-chart>
    </el-row>
    <el-row class="row">
      <div class="chart-filter">
        <el-select clearable class="filter-item" style="width: 130px" v-model="defaultTableDate"  @change="handleTableTimeChange"  placeholder="时间">
          <el-option v-for="item in  tabletimeOptions" :key="item.key" :label="item.display_name" :value="item.key">
          </el-option>
        </el-select>
        <el-date-picker
          v-model="table_pick_date"
          :editable="false"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="handleTableDatePickChange"
          :picker-options="pickerOptions0"
        >
        </el-date-picker>
        <el-button class="filter-item" type="primary" @click="handleQueryTable">查询</el-button>
      </div>
      <el-table :data="list"  element-loading-text="Loading" border fit highlight-current-row>
        <el-table-column align="center" label='用户' >
          <template slot-scope="scope">
            {{scope.row.accountInfo}}
          </template>
        </el-table-column>
        <el-table-column align="center" label="渠道">
          <template slot-scope="scope">
            {{scope.row.channelInfo}}
          </template>
        </el-table-column>
        <el-table-column align="center" label="路由器品牌">
          <template slot-scope="scope">
            <span>{{scope.row.brandInfo}}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" prop="created_at" label="激活量">
          <template slot-scope="scope">
            <span>{{scope.row.activitcount}}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-dialog title="文件上传" :visible.sync="dialogFormVisible" width="30%">
      <upload></upload>
    </el-dialog>
  </div>
</template>

<script>
import LineChart from './components/LineChart'
import Upload from './components/Upload'
import { parseTime } from '@/utils/index'
import { useroptionList, getBingdingList } from '@/api/binding'
import { getTableData, getLineChartData } from '@/api/index'
import { in_array } from '@/utils/index'

const linetimeOptions = [
  { key: '7', display_name: '最近7天' },
  { key: '15', display_name: '最近15天' },
  { key: '30', display_name: '最近30天' }
]

const tabletimeOptions = [
  { key: '7', display_name: '最近7天' },
  { key: '15', display_name: '最近15天' },
  { key: '30', display_name: '最近30天' }
]

export default {
  name: 'home',
  components: {
    LineChart,
    Upload
  },
  data() {
    return {
      userOptions: [],
      brandOptions: [],
      channelOptions: [],
      linetimeOptions,
      tabletimeOptions,
      dafaultchartDate: '最近7天',
      defaultTableDate: '最近7天',
      todayData: [],
      list: [],
      listLoading: false,
      lineChartData: {
        xData: [],
        activeData: []
      },
      pickerOptions0: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        }
      },
      listQuery: {
        accountid: undefined,
        channelid: undefined,
        brandid: undefined,
        datestart: undefined,
        dateend: undefined
      },
      chart_pick_date: '',
      table_pick_date: '',
      pid: '',
      dialogFormVisible: false
    }
  },
  created() {
    const pid = sessionStorage.getItem('pid')
    if (pid) {
      this.pid = parseInt(pid)
    }
    this.getUserOption()
    this.getTadayData()
    const date = new Date()
    this.listQuery.datestart = parseTime(new Date(date - 6 * 24 * 3600 * 1000), '{y}-{m}-{d}')
    this.listQuery.dateend = parseTime(date, '{y}-{m}-{d}')
    this.getList()
    this.getLineChartData()
  },
  methods: {
    getUserOption() {
      const pid = sessionStorage.getItem('id')
      const data = { pid: pid, delflag: 0 }
      useroptionList(data).then(response => {
        if (response.code === 1) {
          const list = response.data
          for (const v of list) {
            const option = {}
            option.key = v.id
            option.text = v.username
            this.userOptions.push(option)
          }
        }
      })
    },
    getOptions() {
      const data = {}
      data.delflag = 0
      if (this.listQuery.accountid) {
        data.accountid = this.listQuery.accountid
      }
      if (this.listQuery.accountid) {
        data.accountid = this.listQuery.accountid
      }
      if (this.listQuery.accountid) {
        data.accountid = this.listQuery.accountid
      }
      getBingdingList(data).then(response => {
        const list = response.data
        for (const item of list) {
          const itemBrand = {}
          const itemChannel = {}
          itemBrand.key = item.brand.id
          itemBrand.text = item.brand.bname
          itemChannel.key = item.channel.id
          itemChannel.text = item.channel.cname
          if (!in_array(itemBrand, this.brandOptions)) {
            this.brandOptions.push(itemBrand)
          }
          if (!in_array(itemChannel, this.channelOptions)) {
            this.channelOptions.push(itemChannel)
          }
        }
        Array.from(new Set(this.brandOptions))
        Array.from(new Set(this.channelOptions))
      })
    },
    getBrandOption() {
      const data = {}
      data.delflag = 0
      data.accountid = this.listQuery.accountid
      getBingdingList(data).then(response => {
        const list = response.data
        for (const item of list) {
          const itemBrand = {}
          const itemChannel = {}
          itemBrand.key = item.brand.id
          itemBrand.text = item.brand.bname
          itemChannel.key = item.channel.id
          itemChannel.text = item.channel.cname
          this.brandOptions.push(itemBrand)
          this.channelOptions.push(itemChannel)
        }
      })
    },
    getChannelOption() {
      const data = {}
      data.delflag = 0
      data.accountid = this.listQuery.accountid
      data.brandid = this.listQuery.brandid
      getBingdingList(data).then(response => {
        const list = response.data
        for (const item of list) {
          const itemBrand = {}
          const itemChannel = {}
          itemBrand.key = item.brand.id
          itemBrand.text = item.brand.bname
          itemChannel.key = item.channel.id
          itemChannel.text = item.channel.cname
          this.brandOptions.push(itemBrand)
          this.channelOptions.push(itemChannel)
        }
      })
    },
    handleFilter() {
      const date = new Date()
      this.table_pick_date = ''
      switch (this.defaultTableDate) {
        case '7':
          this.listQuery.datestart = parseTime(new Date(date - 6 * 24 * 3600 * 1000), '{y}-{m}-{d}')
          this.listQuery.dateend = parseTime(date, '{y}-{m}-{d}')
          break
        case '15':
          this.listQuery.datestart = parseTime(new Date(date - 14 * 24 * 3600 * 1000), '{y}-{m}-{d}')
          this.listQuery.dateend = parseTime(date, '{y}-{m}-{d}')
          break
        case '30':
          this.listQuery.datestart = parseTime(new Date(date - 29 * 24 * 3600 * 1000), '{y}-{m}-{d}')
          this.listQuery.dateend = parseTime(date, '{y}-{m}-{d}')
          break
        default:
          if (this.table_pick_date) {
            this.listQuery.datestart = parseTime(new Date(this.table_pick_date[0]), '{y}-{m}-{d}')
            this.listQuery.dateend = parseTime(new Date(this.table_pick_date[1]), '{y}-{m}-{d}')
          } else if (this.defaultTableDate === '最近7天') {
            this.listQuery.datestart = parseTime(new Date(date - 6 * 24 * 3600 * 1000), '{y}-{m}-{d}')
            this.listQuery.dateend = parseTime(date, '{y}-{m}-{d}')
          }
          break
      }
      this.getList()
      this.getTadayData()
      switch (this.dafaultchartDate) {
        case '7':
          this.listQuery.datestart = parseTime(new Date(date - 6 * 24 * 3600 * 1000), '{y}-{m}-{d}')
          this.listQuery.dateend = parseTime(date, '{y}-{m}-{d}')
          break
        case '15':
          this.listQuery.datestart = parseTime(new Date(date - 14 * 24 * 3600 * 1000), '{y}-{m}-{d}')
          this.listQuery.dateend = parseTime(date, '{y}-{m}-{d}')
          break
        case '30':
          this.listQuery.datestart = parseTime(new Date(date - 29 * 24 * 3600 * 1000), '{y}-{m}-{d}')
          this.listQuery.dateend = parseTime(date, '{y}-{m}-{d}')
          break
        default:
          if (this.chart_pick_date) {
            this.listQuery.datestart = parseTime(new Date(this.table_pick_date[0]), '{y}-{m}-{d}')
            this.listQuery.dateend = parseTime(new Date(this.table_pick_date[1]), '{y}-{m}-{d}')
          } else if (this.dafaultchartDate === '最近7天') {
            this.listQuery.datestart = parseTime(new Date(date - 6 * 24 * 3600 * 1000), '{y}-{m}-{d}')
            this.listQuery.dateend = parseTime(date, '{y}-{m}-{d}')
          }
          break
      }
      this.getLineChartData()
    },
    handleUpload() {
      this.dialogFormVisible = true
    },
    handleLineTimeChange() {
      this.chart_pick_date = ''
      const date = new Date()
      switch (this.dafaultchartDate) {
        case '7':
          this.listQuery.datestart = parseTime(new Date(date - 6 * 24 * 3600 * 1000), '{y}-{m}-{d}')
          this.listQuery.dateend = parseTime(date, '{y}-{m}-{d}')
          break
        case '15':
          this.listQuery.datestart = parseTime(new Date(date - 14 * 24 * 3600 * 1000), '{y}-{m}-{d}')
          this.listQuery.dateend = parseTime(date, '{y}-{m}-{d}')
          break
        case '30':
          this.listQuery.datestart = parseTime(new Date(date - 29 * 24 * 3600 * 1000), '{y}-{m}-{d}')
          this.listQuery.dateend = parseTime(date, '{y}-{m}-{d}')
          break
      }
      this.getLineChartData()
    },
    handleChartDatePickChange() {
      if (this.chart_pick_date) {
        this.dafaultchartDate = ''
        this.listQuery.datestart = parseTime(new Date(this.chart_pick_date[0]), '{y}-{m}-{d}')
        this.listQuery.dateend = parseTime(new Date(this.chart_pick_date[1]), '{y}-{m}-{d}')
      }
    },
    handleQueryChart() {
      this.getLineChartData()
    },
    handleTableTimeChange() {
      const date = new Date()
      this.table_pick_date = ''
      switch (this.defaultTableDate) {
        case '7':
          this.listQuery.datestart = parseTime(new Date(date - 6 * 24 * 3600 * 1000), '{y}-{m}-{d}')
          this.listQuery.dateend = parseTime(date, '{y}-{m}-{d}')
          break
        case '15':
          this.listQuery.datestart = parseTime(new Date(date - 14 * 24 * 3600 * 1000), '{y}-{m}-{d}')
          this.listQuery.dateend = parseTime(date, '{y}-{m}-{d}')
          break
        case '30':
          this.listQuery.datestart = parseTime(new Date(date - 29 * 24 * 3600 * 1000), '{y}-{m}-{d}')
          this.listQuery.dateend = parseTime(date, '{y}-{m}-{d}')
          break
      }
      this.getList()
    },
    handleTableDatePickChange() {
      if (this.table_pick_date) {
        this.defaultTableDate = ''
        this.listQuery.datestart = parseTime(new Date(this.table_pick_date[0]), '{y}-{m}-{d}')
        this.listQuery.dateend = parseTime(new Date(this.table_pick_date[1]), '{y}-{m}-{d}')
      }
    },
    handleQueryTable() {
      this.getList()
    },
    getTadayData() {
      this.listLoading = true
      this.listQuery.datestart = parseTime(new Date(), '{y}-{m}-{d}')
      this.listQuery.dateend = parseTime(new Date(), '{y}-{m}-{d}')
      getTableData(this.listQuery).then(response => {
        if (response.code === 1) {
          this.todayData = response.data
        }
      })
    },
    getLineChartData() {
      getLineChartData(this.listQuery).then(response => {
        if (response.code === 1) {
          const data = response.data
          this.lineChartData.xData = []
          this.lineChartData.activeData = []
          for (const v of data) {
            this.lineChartData.xData.push(v.timescope)
            this.lineChartData.activeData.push(v.total)
          }
        }
      })
    },
    getList() {
      this.listLoading = true
      getTableData(this.listQuery).then(response => {
        if (response.code === 1) {
          this.list = response.data
        }
      })
    }
  }
}
</script>
